<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>太极</title>
    <style>
        *{padding:0;margin:0;}
        canvas{
            background: burlywood;
            margin:50px auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas class="canvas" width="600px" height="400px"></canvas>
   
   <script>
        //获取画布
        var canvas = document.querySelector('canvas');
        //获取画笔
        var paint = canvas.getContext('2d');
        //开始画
        //绘制左侧的白色半圆直径都是150
        paint.fillStyle="#FFFFFF";
        paint.beginPath();
        paint.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);
        paint.closePath();
        paint.fill();
        //绘制右侧的黑色半圆
        paint.fillStyle="#000000";
        paint.beginPath();
        paint.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);
        paint.closePath();
        paint.fill();
        //绘制下面的黑色圆
        paint.fillStyle="#000000";
        paint.beginPath();
        paint.arc(300,275,75,0,2*Math.PI,false);
        paint.closePath();
        paint.fill();
        //绘制上面的白色圆
        paint.fillStyle="#FFFFFF";
        paint.beginPath();
        paint.arc(300,125,75,0,2*Math.PI,false);
        paint.closePath();
        paint.fill();
        //绘制两个小圆
        paint.fillStyle="FFFFFF";
        paint.beginPath();
        paint.arc(300,275,15,0,2*Math.PI,false);
        paint.closePath();
        paint.fill();
        //绘制黑色小圆
        paint.fillStyle="#000";
        paint.beginPath();
        paint.arc(300,125,15,0,2*Math.PI,false);
        paint.closePath();
        paint.fill();
    </script>
</body>
</html>